<template>
	<view class="page flex" :style="{ '--fss': app.theme.fss() }">
		<view class="photoView flex">
			<view class="itemView">
				<view class="photoItem flex">
					<view class="item">
						<image src="/static/img/test/1.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/2.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/3.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/4.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/5.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/6.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
				</view>
			</view>
			<view class="itemView">
				<view class="photoItem flex">
					<view class="item">
						<image src="/static/img/test/7.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/8.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/9.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/10.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/11.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/12.png" mode="aspectFill" class="itemImage"></image>
					</view>
				</view>
			</view>
			<view class="itemView">
				<view class="photoItem flex">
					<view class="item">
						<image src="/static/img/test/1.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/2.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/3.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/4.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/5.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/6.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
				</view>
			</view>
			<view class="itemView">
				<view class="photoItem flex">
					<view class="item">
						<image src="/static/img/test/7.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/8.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/9.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/10.jpg" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/11.png" mode="aspectFill" class="itemImage"></image>
					</view>
					<view class="item">
						<image src="/static/img/test/12.png" mode="aspectFill" class="itemImage"></image>
					</view>
				</view>
			</view>
		</view>
		<common-header fixed background="rgba(0,0,0,0)" title="" rightWidth="80rpx">
			<template #left>
				<text></text>
			</template>
			<template #right>
				<view class="rightText iconfont icon-yuyinguanbi" @tap="app.util.goBack()"></view>
			</template>
		</common-header>
		<view class="vipMain flex">
			<view class="flex" style="flex: 1;height: flex-direction: column; align-items: center; justify-content: center;"  v-if="info === null">
				<loading></loading>
			</view>
			<template v-else>
				<view class="vipTitle">
					<view class="item flex">
						<text class="text">AI几分钟内生成</text>
						<text class="tag">SUNO</text>
					</view>
					<view class="item flex">
						<text class="text">中英文歌曲或者纯音乐</text>
					</view>
				</view>
				<view class="interests">
					<view class="item flex">
						<text class="iconfont icon-triangle"></text>
						<text class="text ell">每日都可以合成歌曲/蠢音乐</text>
					</view>
					<view class="item flex">
						<text class="iconfont icon-triangle"></text>
						<text class="text ell">根据你的想法，生成对应的歌词曲谱</text>
					</view>
					<view class="item flex">
						<text class="iconfont icon-triangle"></text>
						<text class="text ell">合成任务讲会优先排队生成</text>
					</view>
					<view class="item flex">
						<text class="iconfont icon-triangle"></text>
						<text class="text ell">超极速客服响应（7*8小时）</text>
					</view>
				</view>
				<view class="product">
					<view class="item flex" @tap="info.vipIndex = index" :class="index === info.vipIndex ? 'active' : ''" v-for="(item, index) in info.vipList">
						<view class="left">
							<view class="h3 ell">{{ item.name }}</view>
							<view class="desc ell" v-if="item.desc">{{ item.desc }}</view>
						</view>
						<view class="right flex">
							<view class="unit ell">{{ item.priceUnit }}</view>
							<view class="num ell">{{ item.price || "-" }}</view>
						</view>
					</view>
				</view>
				
				<view class="openBtn dis" v-if="info.iapInitStatus === -1">未开始初始化</view>
				<view class="openBtn dis" v-if="info.iapInitStatus === 0">初始化中..</view>
				<template v-if="info.iapInitStatus === 1">
					<view class="openBtn" @tap="openVip">立即开通</view>
				</template>
				<view class="openBtn dis" v-if="info.iapInitStatus === 2">初始化是啊比</view>
				<view class="footFlex flex">
					<view class="item" @tap="app.util.openUserPrivacy('user')">用户协议</view>
					<view class="item" @tap="app.util.openUserPrivacy('privacy')">隐私政策</view>
					<view class="item" @tap="iosPayFunction('restore')" v-if="(info && info.iapInitStatus === 1)">恢复购买</view>
				</view>
				<footer-bar></footer-bar>
			</template>
		</view>
	</view>
	<cannot-pay-vip-guidance ref="cannotPayVipGuidanceRef" />
	<retaining-members ref="retainingMembersRef" />
	<pay-layer ref="payLayerRef" />
</template>

<script setup>
	import { currency } from "../../static/js/libs/vip.currency.js";
	import { ref, onMounted, inject } from "vue";
	import {  onLoad, onShow } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// iOS不能购买的弹窗
	const cannotPayVipGuidanceRef = ref();
	
	// 购买挽留弹窗
	const retainingMembersRef = ref();
	
	// 购买弹窗
	const payLayerRef = ref();
	
	// 基本数据
	const info = ref(null);
	
	// iap对象
	const iap = ref(null);
	
	// 是否正在恢复购买
	const isRestore = ref(false);
	
	
	/* 方法区域 */
	// 点击立即开通
	function openVip(){
		let planItem = info.value.vipList[info.value.vipIndex];
		if (app.config.osName === 1) {
			if(!planItem.inited){
				app.util.toast("套餐正在初始化");
				return;
			}
			iosPayFunction("pay", planItem.iosId);
		} else {
			androidFunction("pay", planItem.id);
		}
	}
	
	// 获取基本数据
	function getData(){
		info.value = {
			vipIndex: 0,
			vipList: [
				{
					name: "终身会员",
					desc: "一次付费终身想用",
					price: "98",
					iosId: "",
					subscription: false,
					inited: false,
					priceUnit: "￥",
					pricelocal: "",
					off_packages: null,
				},
				{
					name: "包周会员",
					desc: "新手优惠套餐",
					price: "18",
					iosId: "",
					subscription: true,
					inited: false,
					priceUnit: "￥",
					pricelocal: "",
					off_packages: null,
				},
				{
					name: "年度会员",
					desc: "超级划算的哟",
					price: "68",
					iosId: "",
					subscription: true,
					inited: false,
					priceUnit: "￥",
					pricelocal: "",
					off_packages: null,
				},
			],
			iapInitStatus: 1,
		}
	}
	
	// iOS支付相关
	function iosPayFunction(type, id){
		if(type == "init"){
			info.value.iapInitStatus = 0;
			uni.getProvider({
				service: "payment",
				success: (res) => {
					
					// 获取IAP对象
					iap.value = res.providers.find((channel) => channel.id === "appleiap");
					if (iap.value === null) {
						info.value.iapInitStatus = 2;
						cannotPayVipGuidanceRef.value.open("iAP没有找到");
						return;
					}
					
					// 开始获取套餐信息
					let iosIds = info.value.vipList.map((item) => {
						return item.iosId;
					});
					if(iosIds.length <= 0){
						app.util.alert({
							content: "没有找到iOS会员套餐ID",
							success(){
								app.util.goBack();
							}
						});
					}
					iap.value.requestProduct(iosIds, (products) => {
						products.map((item, index) => {
							info.value.vipList.map((prop, i) => {
								if(item.productid === prop.iosId){
									let findResult = currency.find(currencyItem => currencyItem.currency_code === item.pricelocal.split("=").pop());
									prop.price = item.price;
									prop.pricelocal = item.pricelocal;
									prop.priceUnit = findResult ? findResult.symbol : "$";
									prop.inited = true;
									prop.off_packages = item.discount && item.discount.length > 0 ? item.discount[0] : null;
								}
							});
						});
						info.value.iapInitStatus = 1;
					}, (err) => {
						info.value.iapInitStatus = 2;
						cannotPayVipGuidanceRef.value.open("iap fail：" + JSON.stringify(ids) + "、" + JSON.stringify(err));
					})
				},
				fail: (res) => {
					info.value.iapInitStatus = 2;
					cannotPayVipGuidanceRef.value.open("fail");
				}
			});
		}else if(type == "pay"){
			app.util.showLoading({ title: "唤起支付中.." });
			uni.requestPayment({
				provider: "appleiap",
				orderInfo: { 
					productid: id,
					username: "",
					manualFinishTransaction: true,
				},
				success(res){
					app.util.hideLoading();
					if(res && res.transactionReceipt){
						iap.value.finishTransaction(res, (e) => { }, (err) => { });
						app.util.showLoading({ title: "验证中.." });
						
					}
				},
				fail(err){
					app.util.hideLoading();
					console.log(err);
				}
			});
		}else if(type == "restore"){
			isRestore.value = false;
			app.util.showLoading({ title: "恢复中.." });
			iap.value.restoreCompletedTransactions({
				manualFinishTransaction: true,
			},(records) => {
				if(isRestore.value) return;
				isRestore.value = true;
				app.util.hideLoading();
				if (records.length && records.length > 0) {
					let restoreList = records.filter(item => {
						if (item.transactionReceipt) return true;
						iap.value.finishTransaction(item);
					});
					if (restoreList.length > 0) {
						//发送后端恢复购买
						app.util.showLoading({ title: "恢复验证.." });
						
					} else {
						app.util.toast("购买记录为空_10002");
					}
				} else {
					_pp.util.hideLoading();
					app.util.toast("购买记录为空_10001");
				}
			},(err) => {
				app.util.hideLoading();
				app.util.toast("恢复购买失败");
			});
		}
	}
	
	// 安卓支付相关
	function androidFunction(type, id){
		if(type == "pay"){
			payLayerRef.value.open({
				payTypeKey: "w",
				payType: "w,a",
			});
		}
	}
	
	
	// 页面被加载的时候
	onMounted(() => {
		getData();
		retainingMembersRef.value.open();
	});
</script>

<style lang="scss" scoped>
	.page{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		flex-direction: column;
		background: #0d1628;
		position: relative;
		.rightText{
			font-size: calc(32rpx * var(--fss));
			color: rgba(255,255,255,0.85);
			border-radius: 50%;
			width: 55rpx;
			line-height: 55rpx;
			text-align: center;
			flex-shrink: 0;
		}
		.photoView{
			transform: rotate(-12deg) scale(1.1);
			position: absolute;
			top: 0;
			left: 30rpx;
			right: 0;
			bottom: 0;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.itemView{
				transform-style:preserve-3d;
				position: relative;
				z-index: 1;
				margin-right: 28rpx;
				&:nth-last-child(1){
					margin-right: 0;
				}
				.photoItem{
					flex-direction: column;
					align-items: center;
					position:relative;
					z-index: 1;
					.item{
						margin-bottom: 25rpx;
						.itemImage{
							border-radius: 16rpx;
							width: 180rpx;
							height: 260rpx;
							display: block;
							background: #2a2c2d;
						}
					}
				}
				&:nth-child(2n - 1){
					.photoItem{
						animation: top-effect 20s linear infinite alternate;
					}
				}
				&:nth-child(2n){
					.photoItem{
						animation: bottom-effect 20s linear infinite alternate;
					}
				}
			}
			@keyframes top-effect {0% {transform: translateY(0);}100% {transform: translateY(-40%);}}
			@keyframes bottom-effect {0% {transform: translateY(-40%);}100% {transform: translateY(0);}}
		}
		.vipMain{
			flex: 1;
			height: 0;
			background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, #0d1628 80%);
			flex-direction: column;
			justify-content: flex-end;
			position: relative;
			padding: 0 40rpx 10rpx 40rpx;
			z-index: 2;
			.vipTitle{
				.item{
					flex-direction: row;
					align-items: center;
					justify-content: center;
					line-height: 75rpx;
					.text{
						font-weight: bold;
						color: #FFF;
						font-size: calc(50rpx * var(--fss));
						text-align: center;
					}
					.tag{
						color: #FFF;
						font-size: calc(26rpx * var(--fss));
						background: #fe7425;
						line-height: 1.4;
						padding: 0 15rpx;
						border-radius: 100rpx;
						margin-left: 20rpx;
						font-weight: bold;
					}
				}
			}
			.interests{
				padding-left: 30rpx;
				margin-top: 20rpx;
				.item{
					flex-direction: row;
					align-items: center;
					height: 60rpx;
					.iconfont{
						color: #FFF;
						font-size: 18rpx;
						opacity: 0.7;
					}
					.text{
						color: #FFF;
						font-size: calc(28rpx * var(--fss));
						opacity: 0.85;
						margin-left: 15rpx;
					}
				}
			}
			.tryView{
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				background: rgba(255,255,255,0.11);
				backdrop-filter: blur(20rpx);
				padding: 35rpx 20rpx 35rpx 36rpx;
				border-radius: 20rpx;
				.text{
					color: #FFF;
					font-size: 30rpx;
					opacity: 0.95;
				}
				.switch{
					transform: scale(0.95);
				}
			}
			.product{
				margin-top: 24rpx;
				.item{
					margin-bottom: 24rpx;
					border: 2rpx solid rgba(255,255,255,0);
					background: rgba(255,255,255,0.11);
					backdrop-filter: blur(20rpx);
					padding: 0 36rpx 0 36rpx;
					border-radius: 20rpx;
					height: 145rpx;
					flex-direction: row;
					align-items: center;
					transition: 0.2s all;
					&:active{
						opacity: 0.9;
					}
					&:nth-last-child(1){
						margin-bottom: 0;
					}
					&.active{
						border: 2rpx solid #FFF;
						background: rgba(255,255,255,0.2);
					}
					.left{
						flex: 1;
						width: 0;
						margin-right: 25rpx;
						.h3{
							color: rgba(255,255,255,0.95);
							font-size: calc(28rpx * var(--fss));
							line-height: 1.2;
							font-weight: bold;
						}
						.desc{
							color: rgba(255,255,255,0.65);
							font-size: calc(24rpx * var(--fss));
							line-height: 1.2;
							margin-top: 10rpx;
						}
					}
					.right{
						color: #FFF;
						opacity: 0.95;
						flex-direction: row;
						align-items: center;
						flex-shrink: 0;
						font-weight: bold;
						.unit{
							font-size: calc(23rpx * var(--fss));
						}
						.num{
							margin-left: 5rpx;
							font-size: calc(34rpx * var(--fss));
						}
					}
				}
			}
			.openBtn{
				margin-top: 70rpx;
				padding: 25rpx 20rpx 25rpx 20rpx;
				border-radius: 100rpx;
				color: #0d1628;
				font-size: calc(30rpx * var(--fss));
				line-height: 1.2;
				font-weight: bold;
				text-align: center;
				background: #FFF;
				transition: 0.2s all;
				&:active{
					opacity: 0.9;
				}
				&.dis{
					opacity: 0.6;
					&:active{
						opacity: 0.6;
					}
				}
			}
			.footFlex{
				margin: 20rpx -20rpx 0 -20rpx;
				height: 85rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.item{
					flex: 1;
					width: 0;
					text-align: center;
					color: rgba(255,255,255,0.6);
					font-size: calc(26rpx * var(--fss));
					line-height: 1.2;
					text-decoration: underline;
					&:nth-child(3){
						font-weight: bold;
						color: rgba(255,255,255,0.95);
					}
				}
			}
		}
	}
</style>